<template>
	<view class="filter-ctn">
		<view class="h100 left">
			<scroll-view scroll-y class="h100 relative">
				<view class="cate-item relative" style="z-index: 2" v-for="(item, index) in cateList" :key="item.value"
					@click="curCate = index">
					<view class="point" v-if="curCate === index"></view>
					<text>{{ item.label }}</text>
				</view>
				<view class="slider" :style="{ top: `${curCate * 86}rpx` }"></view>
			</scroll-view>
		</view>
		<view class="right">
			<scroll-view scroll-y class="h100" scroll-with-animation :scroll-into-view="cateList[curCate].value">
				<!-- 品牌车系 -->
				<view class="justify-between gap10 mb58" id="brand">
					<view class="title">品牌车系</view>
					<view class="flex-1 justify-end align-center" @click="navTo('pages/find-car/car-series')">
						<view class="flex-1 text-right">
							<text class="holder" v-if="!form.brand_id">请选择品牌车系</text>
							<view class="w100 text-right u-line-1" v-else>
								<text>{{ form.brand_name }}</text>
								<text v-if="form.series_id">·{{ form.series_name }}</text>
								<text v-if="form.car_id">·{{ form.car_name }}</text>
							</view>
						</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="22rpx"></u-icon>
					</view>
				</view>
				<!-- 车龄 -->
				<view class="" id="car-age">
					<view class="justify-between">
						<view class="">
							<text class="title">车龄</text>
							<text class="sub-title">(年)</text>
						</view>
						<view class="title-value">0-20年</view>
					</view>
					<u-slider isRange showValue :step="2" :min="0" :max="20" v-model:rangeValue="carAge" height="2px"
						@change="onAgeChange"></u-slider>
					<view class="input-ctn">
						<view class="input-ctn_box">
							<input type="number" v-model="form.car_age_start" placeholder-class="holder-style" placeholder="最早上牌年份"
								@confirm="onAgeStart" />
						</view>
						<u-line length="15rpx" color="#646567" margin="0 23rpx"></u-line>
						<view class="input-ctn_box">
							<input type="number" v-model="form.car_age_end" placeholder-class="holder-style" placeholder="最晚上牌年份"
								@confirm="onAgeEnd" />
						</view>
					</view>
				</view>
				<!-- 行驶公里 -->
				<view class="mt43" id="drive-kilo">
					<view class="justify-between">
						<view class="">
							<text class="title">行驶公里</text>
							<text class="sub-title">(年)</text>
						</view>
						<view class="title-value">0-50万公里</view>
					</view>
					<u-slider isRange showValue :step="2" :min="0" :max="50" v-model:rangeValue="carDrive" height="2px"
						@change="onDriveChange"></u-slider>
					<view class="input-ctn">
						<view class="input-ctn_box">
							<input type="number" v-model="form.mileage_start" placeholder-class="holder-style" placeholder="0万公里"
								@confirm="onDriveStart" />
						</view>
						<u-line length="15rpx" color="#646567" margin="0 23rpx"></u-line>
						<view class="input-ctn_box">
							<input type="number" v-model="form.mileage_end" placeholder-class="holder-style" placeholder="50万公里"
								@confirm="onDriveEnd" />
						</view>
					</view>
				</view>
				<!-- 变速箱 -->
				<view class="mt34" id="transmission">
					<view class="title">变速箱</view>
					<view class="justify-start wrap gap20 mt25">
						<view :class="['choose-box', form.geartype === 0 && 'choose-box-act']" @click="setGeartype(0)">不限</view>
						<view :class="['choose-box', form.geartype === 2 && 'choose-box-act']" @click="setGeartype(2)">手动</view>
						<view :class="['choose-box', form.geartype === 1 && 'choose-box-act']" @click="setGeartype(1)">自动</view>
					</view>
				</view>
				<!-- 动力类型 -->
				<view class="mt34" id="power-type">
					<view class="title">动力类型</view>
					<view class="justify-start wrap gap20 mt25">
						<view :class="['choose-box', form.type===0&&'choose-box-act']" @click="setPowerType(0)">不限</view>
						<view :class="['choose-box', form.type===1&&'choose-box-act']" @click="setPowerType(1)">汽油</view>
						<view :class="['choose-box', form.type===2&&'choose-box-act']" @click="setPowerType(2)">柴油</view>
						<view :class="['choose-box', form.type===3&&'choose-box-act']" @click="setPowerType(3)">混动</view>
						<view :class="['choose-box', form.type===4&&'choose-box-act']" @click="setPowerType(4)">纯电</view>
					</view>
				</view>
				<!-- 排量 -->
				<view class="mt34" id="displacement">
					<view class="title">排量</view>
					<view class="justify-start wrap gap20 mt25">
						<view
							:class="['choose-box', (form.displacement_start+'-'+form.displacement_end)===item.value&&'choose-box-act']"
							v-for="item in displacements" :key="item.value" @click="setDisplacement(item)">{{ item.label }}</view>
					</view>
					<view class="input-ctn">
						<view class="input-ctn_box relative">
							<input type="digit" v-model="form.displacement_start" placeholder-class="holder-style" placeholder="最小排量"
								@confirm="onDisplacementStart" />
							<text class="absolute fs20" style="top: 5rpx; right: 5rpx">L/T</text>
						</view>
						<u-line length="15rpx" color="#646567" margin="0 23rpx"></u-line>
						<view class="input-ctn_box relative">
							<input type="digit" v-model="form.displacement_end" placeholder-class="holder-style" placeholder="最大排量"
								@confirm="onDisplacementEnd" />
							<text class="absolute fs20" style="top: 5rpx; right: 5rpx">L/T</text>
						</view>
					</view>
				</view>
				<!-- 出价价格 -->
				<view class="mt34" id="offer">
					<view class="title">出价</view>
					<view class="justify-start wrap gap20 mt25">
						<view :class="['choose-box', (form.price_start+'-'+form.price_end) === item.value && 'choose-box-act']"
							v-for="item in optionPrice" :key="item.value" @click="onCheckPrice(item)">
							{{ item.label }}
						</view>
					</view>
				</view>
				<!-- 自定义出价价格 -->
				<view class="mt34" id="custom-price">
					<view class="justify-between">
						<view class="">
							<text class="title">自定义价格</text>
							<text class="sub-title">(万元)</text>
						</view>
						<view class="title-value">10万元以上</view>
					</view>
					<u-slider isRange showValue :step="10" :min="0" :max="100" v-model:rangeValue="carPrice" height="2px"
						@change="onPriceChange"></u-slider>
					<view class="input-ctn">
						<view class="input-ctn_box">
							<input type="digit" v-model="form.price_start" placeholder-class="holder-style" placeholder="最小价格"
								@confirm="onPriceStart" />
						</view>
						<u-line length="15rpx" color="#646567" margin="0 23rpx"></u-line>
						<view class="input-ctn_box">
							<input type="digit" v-model="form.price_end" placeholder-class="holder-style" placeholder="最大价格"
								@confirm="onPriceEnd" />
						</view>
					</view>
				</view>
				<!-- 车身颜色 -->
				<view class="mt34" id="vehicle-color">
					<view class="title">车身颜色</view>
					<view class="justify-start wrap gap20 mt25">
						<view :class="['choose-box', form.color===''&&'choose-box-act']" @click="setColor('')">不限</view>
						<view v-for="item in optionColor" :key="item.value"
							:class="['choose-box', form.color===item.name&&'choose-box-act']" @click="setColor(item)">{{ item.name }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		navTo
	} from '@/core/app';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		colorList
	} from "@/api/car.js"
	import {
		useStore
	} from 'vuex';

	/* 初始化缓存 */
	const store = useStore();

	/* 车龄相关 */
	const carAge = ref([0, 10]);

	function onAgeChange(e) {
		form.value.car_age_start = e[0];
		form.value.car_age_end = e[1];
		store.commit('SET_CAR_AGE', {
			car_age_start: e[0],
			car_age_end: e[1]
		});
	}

	function onAgeStart(e) {
		form.value.car_age_start = e.detail.value;
		carAge.value[0] = e.detail.value - 1;
		store.commit('SET_CAR_AGE', {
			car_age_start: e.detail.value,
			car_age_end: form.value.car_age_end
		});
	}

	function onAgeEnd(e) {
		form.value.car_age_end = e.detail.value;
		carAge.value[1] = e.detail.value > 20 ? 20 : e.detail.value;
		store.commit('SET_CAR_AGE', {
			car_age_start: form.value.car_age_start,
			car_age_end: e.detail.value
		});
	}

	/* 行驶里程相关 */
	const carDrive = ref([0, 10]);

	function onDriveChange(e) {
		form.value.mileage_start = e[0];
		form.value.mileage_end = e[1];
		store.commit('SET_MILEAGE', {
			mileage_start: e[0],
			mileage_end: e[1]
		});
	}

	function onDriveStart(e) {
		form.value.mileage_start = e.detail.value;
		carDrive.value[0] = e.detail.value - 1;
		store.commit('SET_MILEAGE', {
			mileage_start: e.detail.value,
			mileage_end: form.value.mileage_end
		});
	}

	function onDriveEnd(e) {
		form.value.mileage_end = e.detail.value;
		carDrive.value[1] = e.detail.value > 20 ? 20 : e.detail.value;
		store.commit('SET_MILEAGE', {
			mileage_start: form.value.mileage_start,
			mileage_end: e.detail.value
		});
	}

	/* 变速箱设置 */
	function setGeartype(index) {
		form.value.geartype = index;
		store.commit('SET_GEARTYPE', index);
	}

	/* 动力类型设置 */
	function setPowerType(index) {
		form.value.power_type = index;
		store.commit('SET_TYPE', index);
	}

	/* 排量 */
	const displacements = ref([{
			label: '不限',
			value: '-'
		},
		{
			label: '1.0T以下',
			value: '-1.0'
		},
		{
			label: '1.1-1.6T',
			value: '1.1-1.6'
		},
		{
			label: '1.7-2.0T',
			value: '1.7-2.0'
		},
		{
			label: '2.1-2.5T',
			value: '2.1-2.5'
		},
		{
			label: '2.6-3.0T',
			value: '2.6-3.0'
		},
		{
			label: '3.1-4.0T',
			value: '3.1-4.0'
		},
		{
			label: '4.0及以上',
			value: '4.0-'
		},
	]);

	function setDisplacement(e) {
		const displacement = e.value.split('-')
		form.value.displacement_start = displacement[0]
		form.value.displacement_end = displacement[1]
		store.commit('SET_DISPLACEMENT', {
			displacement_start: displacement[0],
			displacement_end: displacement[1]
		})
	}

	function onDisplacementStart(e) {
		form.value.displacement_start = e.detail.value
		store.commit('SET_DISPLACEMENT', {
			displacement_start: e.detail.value,
			displacement_end: form.value.displacement_end
		})
	}

	function onDisplacementEnd(e) {
		form.value.displacement_end = e.detail.value
		store.commit('SET_DISPLACEMENT', {
			displacement_start: form.value.displacement_start,
			displacement_end: e.detail.value
		})
	}


	/* 出价相关 */
	const optionPrice = ref([{
			label: '全部',
			value: '-'
		},
		{
			label: '0-5万',
			value: '0-5'
		},
		{
			label: '5-10万',
			value: '5-10'
		},
		{
			label: '10-15万',
			value: '10-15'
		},
		{
			label: '15-20',
			value: '15-20'
		},
		{
			label: '20-30',
			value: '20-30'
		},
		{
			label: '30-40',
			value: '30-40'
		},
		{
			label: '40-70',
			value: '40-70'
		},
		{
			label: '70-100',
			value: '70-100'
		},
		{
			label: '100万以上',
			value: '100-'
		}
	]);

	function onCheckPrice(item) {
		const price = item.value.split('-')
		form.value.price_start = price[0]
		form.value.price_end = price[1]
		carPrice.value = price
		store.commit('SET_PRICE', {
			price_start: price[0],
			price_end: price[1]
		})
	}
	const carPrice = ref([0, 0]);

	function onPriceChange(e) {
		form.value.price_start = e[0];
		form.value.price_end = e[1];
		store.commit('SET_PRICE', {
			price_start: e[0],
			price_end: e[1]
		});
	}

	function onPriceStart(e) {
		form.value.price_start = e.detail.value
		carPrice.value[0] = e.detail.value - 1
		store.commit('SET_PRICE', {
			price_start: e.detail.value,
			price_end: form.value.price_end
		})
	}

	function onPriceEnd(e) {
		form.value.price_end = e.detail.value
		carPrice.value[1] = e.detail.value > 100 ? 100 : e.detail.value
		store.commit('SET_PRICE', {
			price_start: form.value.price_start,
			price_end: e.detail.value
		})
	}

	/* 颜色 */
	const optionColor = ref([]);

	function getCarColor() {
		colorList().then(res => {
			optionColor.value = res.data
		})
	}

	function setColor(e) {
		console.log("e", e.name)
		form.value.color = e ? e.name : '';
		store.commit('SET_COLOR', e ? e.name : '');
	}

	/* 分类 */
	const curCate = ref(0);
	const cateList = [{
			label: '品牌车系',
			value: 'brand'
		},
		{
			label: '车龄',
			value: 'car-age'
		},
		{
			label: '行驶公里',
			value: 'drive-kilo'
		},
		{
			label: '变速箱',
			value: 'transmission'
		},
		{
			label: '动力类型',
			value: 'power-type'
		},
		{
			label: '排量',
			value: 'displacement'
		},
		{
			label: '发布价',
			value: 'offer'
		},
		{
			label: '自定义价格',
			value: 'custom-price'
		},
		{
			label: '车身颜色',
			value: 'vehicle-color'
		}
	];

	const form = ref({});

	function initForm() {
		form.value = store.getters.filterParams;
		carAge.value = [
			form.value.car_age_start !== 0 ? form.value.car_age_start - 1 : 0,
			form.value.car_age_end > 20 ? 20 : form.value.car_age_end
		];
		carDrive.value = [
			form.value.mileage_start !== 0 ? form.value.mileage_start - 1 : 0,
			form.value.mileage_end > 20 ? 20 : form.value.mileage_end
		];
	}

	onShow(() => {
		initForm();
		getCarColor()
	});
</script>

<style scoped lang="scss">
	.filter-ctn {
		width: 100%;
		height: 100%;
		background-color: #f4f5f9;
		padding: 10rpx 0 82rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;

		.left {
			height: 100%;
			width: 163rpx;
			background-color: #f6f7fb;
			flex-shrink: 0;

			.slider {
				position: absolute;
				left: 0;
				width: 100%;
				height: 86rpx;
				background-color: #ffffff;
				z-index: 1;
				transition: all 0.3s;
			}
		}

		.right {
			flex: 1;
			height: 100%;
			background-color: #ffffff;
			padding: 29rpx 34rpx 29rpx 43rpx;
			box-sizing: border-box;

			.input-ctn {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 35rpx;

				&_box {
					width: 198rpx;
					height: 52rpx;
					background: #f6f7fb;
					border-radius: 10rpx;

					input {
						width: 100%;
						height: 100%;
						text-align: center;
					}

					.holder-style {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.cate-item {
		width: 100%;
		height: 87rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
	}

	.point {
		margin-right: 6rpx;

		&::before {
			content: '';
			display: block;
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			background-color: #0759bb;
		}
	}

	.title {
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
	}

	.sub-title {
		font-weight: 400;
		font-size: 20rpx;
		color: #646567;
	}

	.title-value {
		font-weight: bold;
		font-size: 24rpx;
		color: #0759bb;
	}

	.holder {
		font-weight: 400;
		font-size: 24rpx;
		color: #646567;
	}

	.choose-box {
		width: 150rpx;
		height: 67rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		border: 1rpx solid #f7f8fa;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.3s;
	}

	.choose-box-act {
		background: rgba(7, 89, 187, 0.2);
		border: 1rpx solid #88beff;
		font-weight: bold;
		font-size: 26rpx;
		color: #0759bb;
	}
</style>